<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
Copyright (c) 2008 Matthew Johnson
Licensed under the MIT License (see license.txt)	
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Started With ActionML</title>
</head>

<body>
	
<!-- {NAV} -->
<ul class="nav">
	<li>Markup
		<ul>
			<li><a href="getting_started.html">Getting started</a></li>
			<li><a href="attributes.html">Elements and attributes</a></li>
			<li><a href="actions.html">Events and actions</a></li>
			<li><a href="tweens.html">Tweens</a></li>
			<!--<li><a href="more_tweens.html">More tweens</a></li>-->
			<li><a href="custom_actions.html">Custom actions</a></li>
		</ul>
	</li>
	<li>Widgets
		<ul>
			<li><a href="buttons.html">Buttons</a></li>
			<li><a href="more_buttons.html">More buttons (and tabs)</a></li>
			<li><a href="filmstrip.html">Filmstrip</a></li>
			<li><a href="popup.html">Popup</a></li>
			<li><a href="drag_and_drop.html">Drag and drop</a></li>
			<li><a href="slider.html">Slider</a></li>
			<li><a href="scrollable_text.html">Scrollable text</a></li>
			<li><a href="media_controller.html">Media controller</a></li>
			<li><a href="video.html">Video</a></li>
		</ul>
	</li>
	<li>Example Media
		<ul>
			<li><a href="theories_and_assumptions/theories_and_assumptions.html">Tabs with drag and drop</a></li>
			<li><a href="group_counseling/group_counseling.html">Multiple videos with drag and drop</a></li>
		</ul>
	</li>
	<li><a href="cheatsheet.pdf">Cheatsheet</a></li>
	<li><a href="release_notes.html">Release Notes</a></li>
</ul>
<!-- {/NAV} -->
	
<h1>Getting Started With ActionML</h1>
<p>ActionML is a markup language that allows you to add interactivity to a Flash document without the need to write ActionScript.  This allows you as a designer to focus on <em>what</em> interactions you want to happen rather than <em>how</em> to make these interactions happen.</p>

<h2>Setting up an ActionML project</h2> 
<p>The quickest way to set up an ActionML project is to start with the project template.  This template includes all the files required for the project and includes an .fla file that already contains the ActionScript settings necessary for ActionML to function.  This is what the ActionML template folder looks like:
<br /><img src="getting_started/actionml_folder.png" /><br />
The actionml folder and the MediaPiece.as files contain all the ActionScript code that is required for ActionML to work.  You will edit the ActionML Template.fla and ActionML Template.xml files to create your project.  You should rename these files to a name that makes sense for your project.  Both files should have the same name (with different extensions of course).<p>
	
<h2>Configuring ActionScript settings</h2>
<p>ActionScript settings are already configured in the ActionML Template.fla file so there is no need to complete these steps if you are using that as a starting point.  In case you are interested or want to start from scratch the configuration is described here.  The first step is to set your ActionScript properties by clicking in the background of your .fla file and viewing the Properties pane.  Edit the settings to match the following:
<br /><img src="getting_started/actionscript_properties.png" /><br />
Specifically note that the "Document class" setting is MediaPiece.  This tells Flash to execute the MediaPiece.as file when your swf is loaded.  Also notice directly above this setting you see "ActionScript 3.0".  This is important since ActionML is implemented using ActionScript 3.0.  To check that your ActionScript 3.0 settings are correct click the "Settings..." button just to the left.  You should make sure all of the options in the ActionScript settings dialog match the following:
<br /><img src="getting_started/actionscript_settings.png" /><br />
</p>

<h2>Creating your preloader</h2>
<p>ActionML displays a preloader while it is loading your XML file and preparing your file for display to the user.  The preloader is an instance named "preloader" and should be placed on the top layer in your design.  You will usually want this instance to be sized to fit the whole stage area.  Here is what the preloader in the ActionML Template.fla looks like:
<br /><img src="getting_started/preloader.png" /><br />
The preloader should contain a looping animation in order to indicate to the user that something is happening while it is displayed.  This animation should be created inside the preloader symbol.  Once you have created your preloader instance you will want to hide it so you can work on the rest of your design on lower layers.</p>

<h2>Creating your curtain</h2>
<p>Many ActionML projects will require a curtain.  The curtain is used any time a <a href="popup.html">popup</a> is displayed.  It is positioned on top of everything on the stage, but below the popup.  This helps to focus the user's attention on the popup that is being displayed.</p>
<p>The curtain should be on the layer immediately below the preloader and needs to be named "curtain".  The curtain in the ActionML Template file looks like this:
<br /><img src="getting_started/curtain.png" /><br />
This curtain uses a medium-dark gray with a 60% alpha in order to clearly cover the stage content while still leaving it visible.  Once you have created your curtain instance you will want to hide it so you can work on the rest of your design on lower layers.</p>

<h2>Hiding the preloader and curtain</h2>
<p>Once you have created and hidden the preloader and the curtain your layers will look like this:
<br /><img src="getting_started/hidden_layers.png" /><br /><p>

<h2>Moving on</h2>
<p>You are now ready to get started creating your ActionML project!</p>
</body>
</html>
